<template>
  <div>
    <div class="staffen_cont">
      <div class="staffen_top">
        <div class="staffen_top_left">
          <el-select
            v-model="line"
            @change="onchengline"
            style="margin-left: 20px; width: 170px"
            placeholder="线体系列"
          >
            <el-option
              v-for="item in items"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-select
            v-model="value2"
            multiple
            collapse-tags
            :multiple-limit="this.limit"
            style="margin-left: 20px; width: 170px"
            placeholder="人员系列"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item"
            >
            </el-option>
          </el-select>

          <el-button
            type="primary"
            size="mini"
            style="height: 40px"
            @click="getlistclick"
            >更新</el-button
          >
        </div>
        <div class="staffen_top_right">
          <div></div>
          <div></div>
          <div class="el-icon-s-home conthome"></div>
        </div>
      </div>

      <div class="staffen_hader">
        <div class="staffen_hader_title">
          <svg
            width="100%"
            height="75"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            preserveAspectRatio="xMinYMin meet"
          >
            <g stroke="block" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="Group-6" transform="translate(398.000000, -23.000000)">
                <text class="svg_text" :x="this.x" :y="this.y">
                  人员效能看板
                </text>
                <image
                  id="未标题-4"
                  x="28"
                  y="9"
                  width="568"
                  height="131"
                  xlink:href=""
                ></image>
                <polygon
                  id="Stroke-1"
                  stroke="#5BD1FB"
                  stroke-width="2"
                  opacity="0.4"
                  points="0 0 100 98 665 98 765 0"
                ></polygon>
                <polyline
                  id="Path-4"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  points="83 81 101.24847 98.167538 121.346043 98.167538"
                ></polyline>
                <polyline
                  id="Path-4-Copy"
                  stroke="#5BD1FB"
                  stroke-width="4"
                  stroke-linecap="round"
                  transform="translate(663.173022, 89.583769) scale(-1, 1) translate(-663.173022, -89.583769) "
                  points="644 81 662.24847 98.167538 682.346043 98.167538"
                ></polyline>
              </g>
              <g
                xmlns="http://www.w3.org/2000/svg"
                stroke="#5BD1FB"
                stroke-width="2"
                opacity="0.4"
                fill="none"
              >
                <!-- <path d="" /> -->
                <!-- <path class="path1" d="M0.5 0.5L39.5 39.5 L607.5 39.5 L568.5 0.5Z" /> -->
                <!-- <path d="M1352.5 0.5L1313.5 39.5L1881.5 39.5L1919.5 0.5Z" /> -->
              </g>
            </g>
          </svg>
        </div>
        <div class="staffen_hader_body">
          <div class="staffen_hader_body_top">
            <div id="staffen_1"></div>
            <div id="staffen_2"></div>
            <div id="staffen_3"></div>
          </div>
          <div class="staffen_hader_body_bottom">
            <div id="staffen_4"></div>
            <div id="staffen_5"></div>
            <div id="staffen_6"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      items: ["01", "02", "03", "04", "05", "06", "07", "08", "09"],
      limit: 6,
      value2: '',
      line: '',
      options: [],
      x: 290,
      y: 65,
      // cancel:'',
      prson1: [],
      prson2: [],
      prson3: [],
      prson4: [],
      prson5: [],
      prson6: [],

      prsonid1: [],
      prsonid2: [],
      prsonid3: [],
      prsonid4: [],
      prsonid5: [],
      prsonid6: [],

      settime1: null,
      settime2: null,
      settime3: null,
      settime4: null,
      settime5: null,
      settime6: null,
    };
  },
  mounted() {

  },
  methods: {


    onchengline() {
      let line = this.line;
        this.ajax.get(`prod/1021?line=${line}`).then((res) => {
        // console.log(res.data);
        this.options = []
        this.options = res.data.personList;
      });
    },

    getlistclick() {
      if (this.line == "") {
        this.$message({
          showClose: true,
          message: "线体不能为空",
          type: "warning",
        });
      }else if(this.value2 == ''){
          this.$message({
          showClose: true,
          message: "人员不能为空",
          type: "warning",
        });
      }else {
        let personid = this.value2.join("/");
        // console.log(personid)
        this.ajax.get(`prod/1020?personid=${personid}`).then((res) => {
          var reult = res.data.personOut;
          console.log(reult);
          this.prson1 = reult[0];
          this.prson2 = reult[1];
          this.prson3 = reult[2];
          this.prson4 = reult[3];
          this.prson5 = reult[4];
          this.prson6 = reult[5];
          // console.log(this.prson5)
          if (this.prson1) {
            let staffen_1 = this.$echarts.init(
              document.getElementById("staffen_1")
            );
            staffen_1.dispose();
            this.staffen_1();
            //  this.cancel();
          }
          if (this.prson2) {
            let staffen_2 = this.$echarts.init(
              document.getElementById("staffen_2")
            );
            staffen_2.dispose();
            this.staffen_2();
            //  this.cancel();
          }
          if (this.prson3) {
            let staffen_3 = this.$echarts.init(
              document.getElementById("staffen_3")
            );
            staffen_3.dispose();
            this.staffen_3();
            //  this.cancel();
          }
          if (this.prson4) {
            let staffen_4 = this.$echarts.init(
              document.getElementById("staffen_4")
            );
            staffen_4.dispose();
            this.staffen_4();
            //  this.cancel();
          }
          if (this.prson5) {
            let staffen_5 = this.$echarts.init(
              document.getElementById("staffen_5")
            );
            staffen_5.dispose();
            this.staffen_5();
            //  this.cancel();
          }
          if (this.prson6) {
            let staffen_6 = this.$echarts.init(
              document.getElementById("staffen_6")
            );
            staffen_6.dispose();
            this.staffen_6();
            //
          }
        });
        let staffen_1 = this.$echarts.init(
          document.getElementById("staffen_1")
        );
        let staffen_2 = this.$echarts.init(
          document.getElementById("staffen_2")
        );
        let staffen_3 = this.$echarts.init(
          document.getElementById("staffen_3")
        );
        let staffen_4 = this.$echarts.init(
          document.getElementById("staffen_4")
        );
        let staffen_5 = this.$echarts.init(
          document.getElementById("staffen_5")
        );
        let staffen_6 = this.$echarts.init(
          document.getElementById("staffen_6")
        );
        staffen_1.dispose();
        staffen_2.dispose();
        staffen_3.dispose();
        staffen_4.dispose();
        staffen_5.dispose();
        staffen_6.dispose();
        clearInterval(this.settime1);
        clearInterval(this.settime2);
        clearInterval(this.settime3);
        clearInterval(this.settime4);
        clearInterval(this.settime5);
        clearInterval(this.settime6);
      }
    },
    // ///定时请求
    gettimerlist() {
      //  const CancelToken = axios.CancelToken;
      let personid = this.value2.join("/");
      this.ajax.get(`prod/1020?personid=${personid}`).then((res) => {
        var reult = res.data.personOut;
        // console.log(reult)
        this.prsonid1 = reult[0];
        this.prsonid2 = reult[1];
        this.prsonid3 = reult[2];
        this.prsonid4 = reult[3];
        this.prsonid5 = reult[4];
        this.prsonid6 = reult[5];
      });
    },

    staffen_1() {
      let my_newest = this.$echarts.init(document.getElementById("staffen_1"));
      let list = [];
      let keylist = [];
      let linelist = [];
      let nametitle = this.prson1.perId;
      for (let i = 0; i < this.prson1.val.length; i++) {
        keylist.push(this.prson1.val[i].key);
        list.push(this.prson1.val[i].val.total);
        linelist.push(this.prson1.val[i].val.ok.toFixed(2));
      }
      var ony = linelist.map(Number);
      //  console.log(keylist)
      var option = {
        title: {
          text: nametitle,
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}%<br />",
        },
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              interval: "auto",
            },
          },
          {
            type: "value",
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            barWidth: "25%",
            data: list,
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
            },
            label: {
              show: true,
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex: 1,
            label: {
              show: true,
              color: "#ffffff",
              formatter: function (params) {
                //标签内容
                return params.value + "%";
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#ffffff",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
        ],
      };
      my_newest.setOption(option, true);
      this.settime1 = setInterval(() => {
        this.gettimerlist();
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log('11111111111111111111',this.prsonid1)
          for (let i = 0; i < this.prsonid1.val.length; i++) {
            keylist.push(this.prsonid1.val[i].key);
            list.push(this.prsonid1.val[i].val.total);
            linelist.push(this.prson1.val[i].val.ok.toFixed(2));
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              // boundaryGap: false,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                barWidth: "25%",
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  color: "#FFA500",
                },
                label: {
                  show: true,
                  formatter: function (params) {
                    //标签内容
                    return params.value + "%";
                  },
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                label: {
                  show: true,
                  color: "#ffffff",
                },
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#ffffff",
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 3000);
        console.log("更新完成");
      }, 300000);
      my_newest.setOption(option, true);
      window.addEventListener("resize", function () {
        my_newest.resize();
      });
    },

    staffen_2() {
      let my_newest = this.$echarts.init(document.getElementById("staffen_2"));
      let list = [];
      let keylist = [];
      let linelist = [];
      let nametitle = this.prson2.perId;

      for (let i = 0; i < this.prson2.val.length; i++) {
        keylist.push(this.prson2.val[i].key);
        list.push(this.prson2.val[i].val.total);
        linelist.push(this.prson2.val[i].val.ok.toFixed(2));
      }
      var ony = linelist.map(Number);
      //  console.log(keylist)
      var option = {
        title: {
          text: nametitle,
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}%<br />",
        },
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          // boundaryGap: false,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              interval: "auto",
            },
          },
          {
            type: "value",
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barWidth: "25%",
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
            },
            label: {
              show: true,
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex: 1,
            label: {
              show: true,
              color: "#ffffff",
              formatter: function (params) {
                return params.value + "%";
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#ffffff",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
        ],
      };

      my_newest.setOption(option, true);
      this.settime2 = setInterval(() => {
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log('22222222222222222222222',this.prsonid2)
          for (let i = 0; i < this.prsonid2.val.length; i++) {
            keylist.push(this.prsonid2.val[i].key);
            list.push(this.prsonid2.val[i].val.total);
            linelist.push(this.prsonid2.val[i].val.ok.toFixed(2));
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              // boundaryGap: false,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                barWidth: "25%",
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  color: "#FFA500",
                },
                label: {
                  show: true,
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                label: {
                  show: true,
                  color: "#ffffff",
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#ffffff",
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 3000);
      }, 300000);

      window.addEventListener("resize", function () {
        my_newest.resize();
      });
    },

    staffen_3() {
      let my_newest = this.$echarts.init(document.getElementById("staffen_3"));
      let list = [];
      let keylist = [];
      let linelist = [];
      let nametitle = this.prson3.perId;
      //  console.log('333333333333333333',this.prson3.val)
      for (let i = 0; i < this.prson3.val.length; i++) {
        keylist.push(this.prson3.val[i].key);
        list.push(this.prson3.val[i].val.total);
        linelist.push(this.prson3.val[i].val.ok.toFixed(2));
      }
      var ony = linelist.map(Number);
      //  console.log(keylist)
      var option = {
        title: {
          text: nametitle,
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}%<br />",
        },
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          // boundaryGap: false,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              interval: "auto",
            },
          },
          {
            type: "value",
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barWidth: "25%",
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
            },
            label: {
              show: true,
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex: 1,
            label: {
              show: true,
              color: "#ffffff",
              formatter: function (params) {
                return params.value + "%";
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#ffffff",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
        ],
      };

      my_newest.setOption(option, true);
      this.settime3 = setInterval(() => {
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log('3333333333333333333',this.prsonid3)
          for (let i = 0; i < this.prsonid3.val.length; i++) {
            keylist.push(this.prsonid3.val[i].key);
            list.push(this.prsonid3.val[i].val.total);
            linelist.push(this.prsonid3.val[i].val.ok.toFixed(2));
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              // boundaryGap: false,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                barWidth: "25%",
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  color: "#FFA500",
                },
                label: {
                  show: true,
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                label: {
                  show: true,
                  color: "#ffffff",
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#ffffff",
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 3000);
      }, 300000);

      window.addEventListener("resize", function () {
        my_newest.resize();
      });
    },

    staffen_4() {
      let my_newest = this.$echarts.init(document.getElementById("staffen_4"));
      let list = [];
      let keylist = [];
      let linelist = [];
      let nametitle = this.prson4.perId;

      for (let i = 0; i < this.prson4.val.length; i++) {
        keylist.push(this.prson4.val[i].key);
        list.push(this.prson4.val[i].val.total);
        linelist.push(this.prson4.val[i].val.ok.toFixed(2));
      }
      var ony = linelist.map(Number);
      //  console.log(keylist)
      var option = {
        title: {
          text: nametitle,
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}%<br />",
        },
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          // boundaryGap: false,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              interval: "auto",
            },
          },
          {
            type: "value",
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barWidth: "25%",
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
            },
            label: {
              show: true,
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex: 1,
            label: {
              show: true,
              color: "#ffffff",
              formatter: function (params) {
                return params.value + "%";
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#ffffff",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
        ],
      };
      my_newest.setOption(option, true);
      this.settime4 = setInterval(() => {
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log('444444444444444444444444',this.prsonid4)
          for (let i = 0; i < this.prsonid4.val.length; i++) {
            keylist.push(this.prsonid4.val[i].key);
            list.push(this.prsonid4.val[i].val.total);
            linelist.push(this.prsonid4.val[i].val.ok.toFixed(2));
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              // boundaryGap: false,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                barWidth: "25%",
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  color: "#FFA500",
                },
                label: {
                  show: true,
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                label: {
                  show: true,
                  color: "#ffffff",
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#ffffff",
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 3000);
      }, 300000);
      window.addEventListener("resize", function () {
        my_newest.resize();
      });
    },

    staffen_5() {
      let my_newest = this.$echarts.init(document.getElementById("staffen_5"));
      let list = [];
      let keylist = [];
      let linelist = [];
      let nametitle = this.prson5.perId;

      for (let i = 0; i < this.prson5.val.length; i++) {
        keylist.push(this.prson5.val[i].key);
        list.push(this.prson5.val[i].val.total);
        linelist.push(this.prson5.val[i].val.ok.toFixed(2));
      }
      var ony = linelist.map(Number);
      //  console.log(keylist)
      var option = {
        title: {
          text: nametitle,
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}%<br />",
        },
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          // boundaryGap: false,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              interval: "auto",
            },
          },
          {
            type: "value",
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barWidth: "25%",
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
            },
            label: {
              show: true,
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex: 1,
            label: {
              show: true,
              color: "#ffffff",
              formatter: function (params) {
                return params.value + "%";
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#ffffff",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
        ],
      };

      my_newest.setOption(option, true);
      this.settime5 = setInterval(() => {
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log('55555555555555555555555',this.prsonid5)
          for (let i = 0; i < this.prsonid5.val.length; i++) {
            keylist.push(this.prsonid5.val[i].key);
            list.push(this.prsonid1.val[i].val.total);
            linelist.push(this.prsonid5.val[i].val.ok.toFixed(2));
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              boundaryGap: true,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                barWidth: "25%",
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  color: "#FFA500",
                },
                label: {
                  show: true,
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                label: {
                  show: true,
                  color: "#ffffff",
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#ffffff",
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 3000);
      }, 300000);
      window.addEventListener("resize", function () {
        my_newest.resize();
      });
    },

    staffen_6() {
      let my_newest = this.$echarts.init(document.getElementById("staffen_6"));
      let list = [];
      let keylist = [];
      let linelist = [];
      let nametitle = this.prson6.perId;
      for (let i = 0; i < this.prson6.val.length; i++) {
        keylist.push(this.prson6.val[i].key);
        list.push(this.prson6.val[i].val.total);
        linelist.push(this.prson6.val[i].val.ok.toFixed(2));
      }
      var ony = linelist.map(Number);
      //  console.log(keylist)
      var option = {
        title: {
          text: nametitle,
          x: "center",
          y: "7px",
          textStyle: {
            fontSize: 15,
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}%<br />",
        },
        legend: {
          data: ["产能", "良率"],
          right: "10%",
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "1%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
          // boundaryGap: false,
          data: keylist,
          nameTextStyle: {
            fontSize: 8,
          },
        },
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              show: true,
              formatter: "{value}",
              interval: "auto",
            },
          },
          {
            type: "value",
            max: 100,
            min: 0,
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            axisLabel: {
              formatter: "{value}%",
            },
          },
        ],
        series: [
          {
            name: "产能",
            type: "bar",
            // stack: "总量",
            data: list,
            barWidth: "25%",
            symbolSize: 12,
            lineStyle: {
              width: 4,
            },
            itemStyle: {
              color: "#FFA500",
              formatter: function (params) {
                return params.value + "%";
              },
            },
            label: {
              show: true,
            },
          },
          {
            name: "良率",
            type: "line",
            yAxisIndex: 1,
            label: {
              show: true,
              color: "#ffffff",
              formatter: function (params) {
                return params.value + "%";
              },
            },
            lineStyle: {
              normal: {
                type: "dashed",
                color: "#ffffff",
              },
            },
            smooth: false,
            markPoint: {
              symbolOffset: ["70%", "90%"],
            },
            data: ony,
          },
        ],
      };

      my_newest.setOption(option, true);
      this.settime6 = setInterval(() => {
        let list = [];
        let keylist = [];
        let linelist = [];
        setTimeout(() => {
          // console.log('666666666666666666666666',this.prsonid6)
          for (let i = 0; i < this.prsonid6.val.length; i++) {
            keylist.push(this.prsonid6.val[i].key);
            list.push(this.prsonid6.val[i].val.total);
            linelist.push(this.prsonid6.val[i].val.ok.toFixed(2));
          }
          var ony = linelist.map(Number);
          my_newest.setOption({
            xAxis: {
              type: "category",
              boundaryGap: true,
              data: keylist,
              nameTextStyle: {
                fontSize: 8,
              },
              axisLine: {
                lineStyle: {
                  color: "#fff",
                },
              },
            },
            series: [
              {
                name: "产能",
                type: "bar",
                // stack: "总量",
                data: list,
                barWidth: "25%",
                symbolSize: 12,
                lineStyle: {
                  width: 4,
                },
                itemStyle: {
                  color: "#FFA500",
                },
                label: {
                  show: true,
                },
              },
              {
                name: "良率",
                type: "line",
                yAxisIndex: 1,
                label: {
                  show: true,
                  color: "#ffffff",
                  formatter: function (params) {
                    return params.value + "%";
                  },
                },
                lineStyle: {
                  normal: {
                    type: "dashed",
                    color: "#ffffff",
                  },
                },
                smooth: false,
                markPoint: {
                  symbolOffset: ["70%", "90%"],
                },
                data: ony,
              },
            ],
          });
        }, 3000);
      }, 300000);
      window.addEventListener("resize", function () {
        my_newest.resize();
      });
    },

    cancerequest() {
      console.log("走终止函数");
      if (typeof this.source === "function") {
        this.cancel("终止请求");
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.settime1);
    clearInterval(this.settime2);
    clearInterval(this.settime3);
    clearInterval(this.settime4);
    clearInterval(this.settime5);
    clearInterval(this.settime6);
  },
};
</script>

<style  scoped>
.staffen_cont {
  width: 100%;
  /* border: 1px solid red; */
}
.staffen_top {
  width: 100%;
  /* border: 1px solid #000; */
  display: flex;
  justify-content: space-between;
}
.staffen_top .staffen_top_left {
  width: 40%;
  /* border: 1px solid blue; */
  display: flex;
}
.staffen_top .staffen_top_right {
  width: 30%;
  /* border: 1px solid yellow; */
  display: flex;
  justify-content: space-between;
}
.conthome {
  font-size: 40px;
}
.staffen_hader {
  width: 100%;
  /* border: 1px solid #000; */
  margin-top: 20px;
  background: #09163d;
  padding-bottom: 10px;
}
.staffen_hader_title {
  width: 100%;
  /* border: 1px solid red; */
}
.svg_text {
  fill: #ffffff;
  font-size: 24px;
}
.staffen_hader .staffen_hader_body {
  width: 100%;
  /* border: 1px solid darkblue; */
  /* display:flex; */
}
.staffen_hader .staffen_hader_body_top {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.staffen_hader .staffen_hader_body_bottom {
  width: 100%;
  display: flex;
  justify-content: space-around;
}

#staffen_1 {
  width: 30%;
  height: 280px;
  /* border:1px solid #ffffff; */
  box-shadow: 0px 0px 0px 1px gainsboro;
  margin-bottom: 5px;
}
#staffen_2 {
  width: 30%;
  height: 280px;
  /* border:1px solid #ffffff; */
  box-shadow: 0px 0px 0px 1px gainsboro;
}
#staffen_3 {
  width: 30%;
  height: 280px;
  /* border:1px solid #ffffff; */
  box-shadow: 0px 0px 0px 1px gainsboro;
}
#staffen_4 {
  width: 30%;
  height: 280px;
  /* border:1px solid #ffffff; */
  box-shadow: 0px 0px 0px 1px gainsboro;
}
#staffen_5 {
  width: 30%;
  height: 280px;
  /* border:1px solid #ffffff; */
  box-shadow: 0px 0px 0px 1px gainsboro;
}
#staffen_6 {
  width: 30%;
  height: 280px;
  /* border:1px solid #ffffff; */
  box-shadow: 0px 0px 0px 1px gainsboro;
}
@media screen and (min-width: 1920px) {
  #Group-6 {
    transform: translate(577px, -23px);
  }
  .staffen_hader {
    width: 100%;
    /* border: 1px solid #000; */
    margin-top: 30px;
    background: #09163d;
    padding-bottom: 30px;
  }
  .staffen_hader_body {
    margin-top: 40px;
  }
  #staffen_1 {
    width: 30%;
    height: 300px;
    /* border:1px solid #ffffff; */
    box-shadow: 0px 0px 0px 1px gainsboro;
    margin-bottom: 30px;
  }
  #staffen_2 {
    width: 30%;
    height: 300px;
    /* border:1px solid #ffffff; */
    box-shadow: 0px 0px 0px 1px gainsboro;
    margin-bottom: 30px;
  }
  #staffen_3 {
    width: 30%;
    height: 300px;
    /* border:1px solid #ffffff; */
    box-shadow: 0px 0px 0px 1px gainsboro;
    margin-bottom: 30px;
  }
  #staffen_4 {
    width: 30%;
    height: 300px;
    /* border:1px solid #ffffff; */
    margin-bottom: 30px;
    box-shadow: 0px 0px 0px 1px gainsboro;
  }
  #staffen_5 {
    width: 30%;
    height: 300px;
    margin-bottom: 30px;
    /* border:1px solid #ffffff; */
    box-shadow: 0px 0px 0px 1px gainsboro;
  }
  #staffen_6 {
    width: 30%;
    height: 300px;
    margin-bottom: 30px;
    /* border:1px solid #ffffff; */
    box-shadow: 0px 0px 0px 1px gainsboro;
  }
}
</style>